<template>

  <div style="width: 99%">
    <!--    <div style="margin-bottom: 10px">-->
    <!--      <el-breadcrumb separator="/">-->
    <!--        <el-breadcrumb-item>系统管理</el-breadcrumb-item>-->
    <!--        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>-->
    <!--      </el-breadcrumb>-->
    <!--    </div>-->

    <div style="margin-top: 10px">
      <div class="filter-group">
        <span>企业名称</span>
        <el-input  placeholder="请输入企业名称" v-model="queryObj.name" style="width: 200px;" clearable></el-input>
<!--        <span>状态</span>-->
<!--        <el-select  placeholder="状态筛选" clearable style="width: 120px;">-->
<!--          <el-option label="启用" value="active"></el-option>-->
<!--          <el-option label="禁用" value="inactive"></el-option>-->
<!--        </el-select>-->

<!--        <span>创建时间</span>-->
<!--        <el-date-picker-->
<!--          type="daterange"-->
<!--          range-separator="至"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期"-->
<!--          style="width: 300px;"-->
<!--        >-->
<!--        </el-date-picker>-->

        <el-button type="primary"  @click="_page">查询</el-button>
        <el-button  @click="">重置</el-button>

        <el-button type="primary" @click="_add">添加</el-button>

      </div>
    </div>
    <div >
      <EleTable ref="eleTableRef"
                url="/api/base/sys_company/pageVO"
                :columnName="columnName"
                :queryObj="queryObj"
                :optList="optList"
                @opt-click="_opt"
      >

      </EleTable>
    </div>
    <EleDetail ref="sysCompanyEleDetailRef" :formList="columnName" :formObj="formObj" title="菜单详情"  @on-result-change="_page"></EleDetail>
    <EleEdit ref="sysCompanyEleEditRef" :formList="columnName" :formObj="formObj" :title="editTitle" @save-result-change="_save"  @on-result-change="_page"></EleEdit>
  </div>

</template>

<script>


import  EleTable from '../../../common/EleTable'
import  EleDetail from '../../../common/EleDetail'
import  EleEdit from '../../../common/EleEdit'
export default {
  components:{
    EleDetail,
    EleEdit,
    EleTable
  },
  created(){
    this.getTableHeight();
  },
  mounted(){
    this._page();
  },
  name: "Home",
  data(){
    return {
      windowHeight: document.documentElement.clientHeight,
      windowWidth: document.documentElement.clientWidth,
      currentPage:1, //初始页
      pageSize:10,    //    每页的数据
      total:0,    //    总条数
      tableHeight: "",//表格高度
      editTitle: "",//表格高度
      queryObj: {},//查询参数
      formObj:{},
      columnName:[
        {prop:"name",label:"企业名称",width:"120",fixed:true},
        {prop:"enName",label:"英文名称",width:"120"},
        {prop:"tel",label:"联系电话",width:"120"},
        {prop:"contacts",label:"联系人",width:"120"},
        {prop:"address",label:"企业地址",width:"120"},
        {prop:"email",label:"企业邮箱",width:"120"},
        {prop:"fax",label:"传真",width:"120"},
        {prop:"website",label:"网址",width:"120"},
        {prop:"license",label:"营业执照号",width:"120"},
        {prop:"remark",label:"备注",width:"120"},
      ],
      optList:[
        {name:"查看",key:'detail'},
        {name:"编辑",key:'edit'},
      ]
    }
  },
  methods:{
    handleClick(data){
      console.log(data);
    },
    getTableHeight() {
      let tableH = 160; //距离页面下方的高度
      this.tableHeight = window.innerHeight - tableH;
      console.log('this.tableHeight------',this.tableHeight);
    },


    handleSizeChange(val) {
      this.pageSize=val;
      this._page();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this._page();
    },

    _add(){
      this.formObj={};
      this.$refs.sysCompanyEleEditRef._open();
    },

    _save(data){
      console.log('-------save-------',data);
      if (undefined === data.id || null === data.id ) {
        this.$http.post('/api/base/sys_company/add',data).then(res=>{
          console.log('res----------------',res)
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this._page();
          this.$refs.sysCompanyEleEditRef._close();
        }).catch(err=>{
          this.$message({
            type: 'info',
            message: '添加失败'
          });
        })
      }else {
        this.$http.put('/api/base/sys_company/'+data.id,data).then(res=>{
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
          this._page();
          this.$refs.sysCompanyEleEditRef._close();
        }).catch(err=>{
          this.$message({
            type: 'info',
            message: '编辑失败'
          });
        })
      }

    },

    _opt(data,key){
      switch (key){
        case 'edit':
          this.editTitle ='编辑企业信息';
          this.$http.get('/api/base/sys_company/'+data.id).then(res=>{
            this.formObj=res.data.data;
            this.$refs.sysCompanyEleEditRef._open();
          }).catch(err=>{

          });
          break;
        case 'detail':
          this.$http.get('/api/base/sys_company/'+data.id).then(res=>{
            this.formObj=res.data.data;
            this.$refs.sysCompanyEleDetailRef._open();
          }).catch(err=>{

          });
          break;
      }
    },
    _page(){
      this.$refs.eleTableRef._page();
    },

  },
}
</script>

<style scoped>




</style>
